// General mode

.mt-element-ribbon {
	position: relative;
	margin-bottom: 30px;

	.ribbon-content {
		margin: 0;
		padding: 25px;
		clear: both;

		&.no-padding {
			padding-top: 0;
		}
	}

	.ribbon {
		padding: 0.5em 1em;
		z-index: 5;
		float: left;
		margin: 10px 0 0 -2px;
		clear: left;
		position: relative;

		// POSITION CONTROL
		&.ribbon-right {
			float: right;
			clear: right;
			margin: 10px -2px 0 0;

		}
		&.ribbon-vertical-left {
			clear: none;
			margin: -2px 0 0 10px;
			padding-top: 1em;
			padding-bottom: 1em;
			width: 41px;
			text-align: center;
		}
		&.ribbon-vertical-right {
			clear: none;
			float: right;
			margin: -2px 10px 0 0;
			padding-top: 1em;
			padding-bottom: 1em;
			width: 41px;
			text-align: center;
		}

		// EFFECT CONTROL
		&.ribbon-shadow {
			box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.4);

			&.ribbon-right,
			&.ribbon-vertical-right {
				box-shadow: -2px 2px 7px rgba(0, 0, 0, 0.4);
			}
		}

		&.ribbon-round {
			border-top-right-radius: 5px !important;
			border-bottom-right-radius: 5px !important;

			&.ribbon-right {
				border-top-right-radius: 0px !important;
				border-bottom-right-radius: 0px !important;
				border-top-left-radius: 5px !important;
				border-bottom-left-radius: 5px !important;
			}

			&.ribbon-vertical-right,
			&.ribbon-vertical-left {
				border-top-right-radius: 0px !important;
				border-bottom-right-radius: 5px !important;
				border-top-left-radius: 0px !important;
				border-bottom-left-radius: 5px !important;
			}
		}

		&.ribbon-border {

			&:after {
				border: 1px solid;
				content: '';
				position: absolute;
				top: 5px;
				bottom: 5px;
				left: 5px;
				right: 5px;
			}
		}
		&.ribbon-border-vert {

			&:after {
				border-top: none;
				border-bottom: none;
				border-left: 1px solid;
				border-right: 1px solid;
				content: '';
				position: absolute;
				top: 0;
				bottom: 0;
				left: 5px;
				right: 5px;
			}
		}
		&.ribbon-border-hor {

			&:after {
				border-top: 1px solid;
				border-bottom: 1px solid;
				border-left: none;
				border-right: none;
				content: '';
				position: absolute;
				top: 5px;
				bottom: 5px;
				left: 0;
				right: 0;
			}
		}

		&.ribbon-border-dash {

			&:after {
				border: 1px solid;
				border-style: dashed;
				content: '';
				position: absolute;
				top: 5px;
				bottom: 5px;
				left: 5px;
				right: 5px;
			}
		}
		&.ribbon-border-dash-vert {

			&:after {
				border-top: none;
				border-bottom: none;
				border-left: 1px solid;
				border-right: 1px solid;
				border-left-style: dashed;
				border-right-style: dashed;
				content: '';
				position: absolute;
				top: 0;
				bottom: 0;
				left: 5px;
				right: 5px;
			}
		}
		&.ribbon-border-dash-hor {

			&:after {
				border-top: 1px solid;
				border-bottom: 1px solid;
				border-left: none;
				border-right: none;
				border-top-style: dashed;
				border-bottom-style: dashed;
				content: '';
				position: absolute;
				top: 5px;
				bottom: 5px;
				left: 0;
				right: 0;
			}
		}

		&.ribbon-clip {
			left: -10px;
			margin-left: 0;

			&.ribbon-right {
				left: auto;
				right: -10px;
				margin-right: 0;
			}
		}

		// SUB ELEMENT
		> .ribbon-sub {
			z-index: -1;
			position: absolute;
			padding: 0;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;

			&.ribbon-clip {

				&:before,
				&:after {
					content: '';
					position: absolute;
					border-style: solid;
					border-color: transparent !important;
					bottom: -10px;
				}

				&:before {
					border-width: 0 10px 10px 0;
					border-right-color: #222 !important;
					left: 0;
				}

				&.ribbon-right {

					&:before,
					&:after {
						content: '';
						position: absolute;
						border-style: solid;
						border-color: transparent;
						bottom: -10px;
					}

					&:before {
						border-right-color: transparent !important;
					}

					&:after {
						border-width: 0 0 10px 10px;
						border-left-color: #222 !important;
						right: 0;
					}
				}
			}

			&.ribbon-bookmark {
				&:after {
					border-left: 21px solid;
					border-right: 20px solid;
					border-bottom: 1em solid transparent !important;
					bottom: -1em;
					content: '';
					height: 0;
					left: 0;
					position: absolute;
					width: 0;
				}
			}
		}

		// COLOR CONTROl
		background-color: $brand-default;
		color: darken($brand-default, 50%);
		&:after {
			border-color: darken($brand-default, 30%);
		}
		> .ribbon-sub {
			background-color: $brand-default;
			color: darken($brand-default, 50%);
			&:after {
				border-color: darken($brand-default, 30%);
				border-left-color: $brand-default;
				border-right-color: $brand-default;
			}
		}

		&.ribbon-color-default {
			background-color: $brand-default;
			color: darken($brand-default, 50%);

			&:after {
				border-color: darken($brand-default, 10%);
			}
			> .ribbon-sub {
				background-color: $brand-default;
				color: darken($brand-default, 50%);
				&:after {
					border-color: darken($brand-default, 30%);
					border-left-color: $brand-default;
					border-right-color: $brand-default;
				}
			}
		}
		&.ribbon-color-primary {
			background-color: $brand-primary;
			color: #fff;

			&:after {
				border-color: darken($brand-primary, 10%);
			}
			> .ribbon-sub {
				background-color: $brand-primary;
				color: darken($brand-primary, 50%);
				&:after {
					border-color: darken($brand-primary, 30%);
					border-left-color: $brand-primary;
					border-right-color: $brand-primary;
				}
			}
		}
		&.ribbon-color-info {
			background-color: $brand-info;
			color: #fff;

			&:after {
				border-color: darken($brand-info, 10%);
			}
			> .ribbon-sub {
				background-color: $brand-info;
				color: darken($brand-info, 50%);
				&:after {
					border-color: darken($brand-info, 30%);
					border-left-color: $brand-info;
					border-right-color: $brand-info;
				}
			}
		}
		&.ribbon-color-success {
			background-color: $brand-success;
			color: #fff;

			&:after {
				border-color: darken($brand-success, 10%);
			}
			> .ribbon-sub {
				background-color: $brand-success;
				color: darken($brand-success, 50%);
				&:after {
					border-color: darken($brand-success, 30%);
					border-left-color: $brand-success;
					border-right-color: $brand-success;
				}
			}
		}
		&.ribbon-color-danger {
			background-color: $brand-danger;
			color: #fff;

			&:after {
				border-color: darken($brand-danger, 10%);
			}
			> .ribbon-sub {
				background-color: $brand-danger;
				color: darken($brand-danger, 50%);
				&:after {
					border-color: darken($brand-danger, 30%);
					border-left-color: $brand-danger;
					border-right-color: $brand-danger;
				}
			}
		}
		&.ribbon-color-warning {
			background-color: $brand-warning;
			color: darken($brand-warning, 50%);

			&:after {
				border-color: darken($brand-warning, 10%);
			}
			> .ribbon-sub {
				background-color: $brand-warning;
				color: darken($brand-warning, 50%);
				&:after {
					border-color: darken($brand-warning, 30%);
					border-left-color: $brand-warning;
					border-right-color: $brand-warning;
				}
			}
		}

	}

}

